<script lang="ts" setup>
import { ref, computed } from "vue";	
import { oneClickLoginApi } from '../../api';
import { encryptLong } from '@/common/rsa.js';
import NavBar from '@/components/navbar/index.vue'
import { throttle } from "../../utils/tools";

const isSelectArg = ref(false)
const getArgImg = computed(()=>{
	return isSelectArg.value ? '/static/login/selected.png' : '/static/login/unselected.png'
})

const getPhoneNumber = throttle(() =>{
	uni.login({
		provider: 'weixin',
		success: function ({code}) {
			login(code)
		}
	});
}, 1500) 

const login = async (code: string) =>{
	uni.removeStorageSync('key')
	uni.removeStorageSync('token')
	const { obj } = await oneClickLoginApi({code, source: 6})
	const { token, id} = obj
	let connectStr = `userId=${id}&token=${token}&time=${new Date().getTime()}`
	const cryptStr = encryptLong(connectStr)
	uni.setStorageSync('key', cryptStr)
	uni.setStorageSync('token', token)
	uni.setStorageSync('userId', `${id}`)
	uni.reLaunch({
		url:"/pages/index/index"
	})

}
const tipSelectedArg = () =>{
	uni.showToast({
		title: '请勾选协议哦~',
		icon: 'none'
	})
}
const navToWebView = (url: string) =>{
	const data = { url }
	uni.navigateTo({
		url:'/pages/web-view/index?data=' + encodeURIComponent(JSON.stringify(data))
	})
}
</script>

<template>
	<NavBar :underNavBar="false" />
	<image class="logo" src="http://xiaobu-data.oss-cn-shenzhen.aliyuncs.com/mini/pep/static/logo.png"/>
	<template>
		<button
			v-if="isSelectArg"  
			class="btn" 
			@click="getPhoneNumber"
		>
			一键登录
		</button>
		<button v-else @click="tipSelectedArg" class="btn">一键登录</button>
	</template>
	<view class="agreement">
		<image @click="isSelectArg = !isSelectArg" :src="getArgImg" />
		<view>
			<text>点击登录或完成账号注册即代表您已阅读并同意</text>
			<text @click="navToWebView('https://www.vipxb.cn/pep_register.html')">《同步点读宝使用协议与版本声明》</text>
			<text @click="navToWebView('https://www.vipxb.cn/pep_rule.html')">《同步点读宝隐私保护指引》</text>
		</view>
	</view>	
</template>

<style lang="scss">
.logo{
  width: 200rpx;
  height: 200rpx;
  display: block;
  border-radius: 50%;
  margin: 20rpx auto 0 auto;
}	
.btn{
	width: 500rpx;
	font-weight: 600;
	border-radius: 20rpx;
	border: none;
	margin-top: 100rpx;
	background: #FBCA41;
}
.agreement{
  width: 645rpx;
  height: 49rpx;
  display: flex;
  align-items: center;
  margin: 40rpx auto 0 auto;
	image{
		width: 40rpx;
		height: 40rpx;
		flex-shrink: 0;
		margin-right: 14rpx;
	}
	text{
		width: 559rpx;
		font-size: 20rpx;
		line-height: 20rpx;
		font-weight: 400;
		color: #646464;
		line-height: 30rpx;
		font-family: Source Han Sans CN;
	}
}
</style>
